<template>
    <div>
        <el-dialog :title="formData.id ? '更新资讯' : '插入资讯'" v-model="open" width="90%">
            <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
                <el-form-item prop="title" label="标题">
                    <el-input v-model="formData.title" type="text"></el-input>
                </el-form-item>
                <el-form-item prop="newsType" label="类型">
                    <el-select v-model="formData.newsType" class="m-2" placeholder="Select" size="large">
                        <el-option v-for="(item, index) in ['区块链资讯', '彩市资讯', '国际足球资讯', '中国足球资讯', '欧冠资讯', '中超资讯', '英超资讯', '西甲资讯', '意甲资讯', '法甲资讯',
                            '德甲资讯']" :key="index" :label="item" :value="index" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="status" label="状态">
                    <el-select v-model="formData.status" class="m-2" placeholder="Select" size="large">
                        <el-option v-for="(item, index) in Status" :key="index" :label="item.text" :value="item.statu" />
                    </el-select>
                </el-form-item>
                <!-- <el-form-item prop="author" label="作者">
                    <el-input v-model="formData.author" type="text"></el-input>
                </el-form-item> -->
                <!-- <el-form-item prop="website" label="网站链接">
                    <el-input v-model="formData.website" type="text"></el-input>
                </el-form-item> -->
                <!-- <el-form-item prop="readCount" label="阅读数量">
                    <el-input v-model="formData.readCount" type="text"></el-input>
                </el-form-item> -->
                <el-form-item prop="newsTime2" label="资讯时间">
                    <el-date-picker v-model="formData.newsTime2" type="date" format="YYYY/MM/DD" value-format="x" />
                </el-form-item>
                <el-form-item prop="orderNum" label="排序">
                    <el-input v-model="formData.orderNum" type="text" placeholder="默认0,  99置顶"></el-input>
                </el-form-item>
                <el-form-item prop="images" label="图片">
                    <el-upload class="avatar-uploader" v-model:file-list="fileList" list-type="picture-card"
                        action="https://reddevil.app/upapi/upload" :on-change="onChange" :limit="3" :auto-upload="false">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item prop="content" label="内容">
                    <quill-editor-modal :option="formData" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button :loading="loading" @click="open = false">取消</el-button>
                    <el-button type="primary" :loading="loading" @click="onSubmit('formData')">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue"
import { insertNews, updateNews, upload } from "@/api";
import { ElMessageBox, ElMessage } from "element-plus";
import { Plus } from '@element-plus/icons-vue'

export default defineComponent({
    components: { Plus },
    props: {
        Status: {
            type: Array,
        },
        languageList: {
            type: Array,
        },
    },
    setup(prop, nex) {
        const formRef = ref()
        const open = ref(false)
        const loading = ref(false)
        const fileList = ref([])
        const formData = reactive({
            id: "",
            languageId: 0,
            title: "",
            content: "",
            newsType: "0",
            author: "",
            website: "",
            readCount: "",
            newsTime: "",
            newsTime2: "",
            orderNum: "",
            images: "",
            status: "0"
        })
        const rules = reactive({
            title: [{ required: true, message: "请输入标题", trigger: "blur" }],
            content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        })
        const show = (row) => {
            open.value = true
            fileList.value = []
            if (row) {
                formData.id = row.Id;
                formData.languageId = row.LanguageId;
                formData.title = row.Title;
                formData.content = row.Content;
                formData.newsType = row.NewsType;
                formData.author = row.Author;
                formData.website = row.Website;
                formData.readCount = row.ReadCount;
                formData.newsTime2 = new Date(row.NewsTime).getTime()
                formData.orderNum = row.OrderNum;
                formData.status = row.Status;
                row.Images?.split(",").forEach(item => fileList.value.push({ url: '/upapi/inline/' + item, FileName: item }))

            } else {
                formData.id = "";
                formData.languageId = 0;
                formData.title = "";
                formData.content = " ";
                formData.newsType = 0
                formData.author = ""
                formData.website = ""
                formData.readCount = "0"
                formData.newsTime2 = ""
                formData.orderNum = ""
                formData.images = ""
                formData.status = 2
            }
        }
        const onSubmit = async () => {
            console.log(fileList.value.map(item => item.FileName)?.join(","))
            const a = await formRef.value.validate().catch(() => null)
            if (!a) return
            loading.value = true
            try {
                let res;
                formData.newsTime = formData.newsTime2 / 1000
                formData.images = fileList.value.map(item => item.FileName)?.join(",")
                if (formData.id) {
                    res = await updateNews(formData);
                } else {
                    res = await insertNews(formData);
                }
                if (res.data.code == 20) {
                    ElMessage.success("成功");
                    open.value = false;
                    nex.emit("load")
                }
            } catch (error) {
                ElMessage.error(error.message);
            }
            loading.value = false

        }

        const onChange = async (rawFile, List) => {
            const file = rawFile.raw
            if (['image/jpeg', 'image/png', 'image/jpeg'].indexOf(file.type) == -1) {
                ElMessage.error('Avatar picture must be JPG format!')
                return false
            } else if (file.size / 1024 / 1024 > 2) {
                ElMessage.error('Avatar picture size can not exceed 2MB!')
                return false
            }
            try {
                let formData = new FormData();
                formData.append('file', file);
                const res = await upload(formData)
                List[List.length - 1].FileName = res.data.data.FileNames[0]
                fileList.value = List
                return true
            } catch (error) {
                ElMessage.error(error.message);
            }
        }
        return {
            formRef,
            open,
            loading,
            formData,
            rules,
            fileList,
            show,
            onSubmit,
            onChange
        }
    }
})
</script>
<style lang="scss" scoped>
.el-select,
.el-date-editor {
    width: 100%;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>